<template>
    <h3>注册页面</h3>
    <table>
        <tr>
            <td>用户名：</td>
            <td><input type="text" id="Uname" v-model="U_Name"></td>
        </tr>
        <tr>
            <td>密码：</td>
            <td><input type="password" id="Upwd" v-model="U_Password"></td>
        </tr>
        <tr>
            <td><input type="button" value="注册" @click="Add"></td>
        </tr>
    </table>
</template>

<script setup lang="ts">
//引用ref(是函数，所以使用花括号)
import { ref } from 'vue';
//引用axios
import axios from 'axios'

const U_Name = ref("")
const U_Password = ref("")
//完成注册方法
const Add = () => {
    //判断非空
    if (!U_Name.value) {
        alert('用户名不能为空');
        return;
    }
    if (!U_Password.value) {
        alert('密码不能为空');
        return;
    }
    axios.post('http://localhost:51528/api/Users/UserRegister', {
        U_Name: U_Name.value,
        U_Password: U_Password.value
    })
        .then(res => {
            alert('注册成功')
            return res;
        })
        .catch(error => {
            alert('注册失败')
            console.log(error);
        })
}
</script>